<template>
	<view class="group-pro-item" :style="[proStyle]" @click="goProductDetail">
		<image :style="{borderRadius: proStyle.borderRadius, width: '350rpx'}" :src="info.image" mode="widthFix" />
		<view class="pro-text">
			{{ info.fullName }}
		</view>
		<view v-if="!info.shopPrice" class="color3 pro-price">
			已售罄
		</view>
		<view class="pro-price" v-else>
			<view class="price">
				{{info.shopPrice}}
			</view>
			<view class="profit-model" v-if="info.surplusAmount || info.prointAmount">
				<view class="inline-flex">
					<image class="p-xxd-01" :src="`${imgBaseUrl}p_xdd_01.png`" mode="heightFix" />
				</view>
				<view class="inline-flex point-amount" v-if="info.prointAmount">
					<text>积分</text>
					<text class="point-value">{{ info.prointAmount || '0.00'}}</text>
				</view>
				<view class="inline-flex surplus-amount" v-if="info.surplusAmount">
					<text>余额</text>
					<text class="surplus-value">{{ info.surplusAmount || '0.00' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgBaseUrl: this.IMG_BASE_URL
			}
		},
		props: {
			info: {
				type: Object,
				default: () => {}
			},
			proStyle: {
				type: Object,
				default: () => {}
			}
		},
		methods: {
			goProductDetail () {
				uni.navigateTo({
					url: `/pagesProduct/productDetail/index?id=${this.info.id}`
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.group-pro-item {
		display: inline-flex;
		flex-wrap: wrap;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.pro-text {
		width: 100%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-size: 25rpx;
		margin-top: 10rpx;
	}

	.pro-price {
		width: 100%;
		margin-top: 10rpx;

		.price {
			display: inline-block;
			color: $theme-color;
			font-size: 32rpx;

			&::before {
				content: '¥';
				margin-right: 4rpx;
				font-size: 24rpx;
			}
		}

		.vip-price {
			border-radius: 8rpx;
			background: linear-gradient(103deg, #FB9DBB 0%, #F0DFCB 0%, #F2CEAC 97%);

			.ident {
				width: 135rpx;
			}

			.text {
				padding: 2rpx 18rpx 2rpx 10rpx;
			}
		}
	}
</style>